<template>
    <el-cascader v-model="inputValue" :disabled="disabled" ref="cascader"
                 :options="options"
                 placeholder="请选择分类"
                 :props="{ checkStrictly: checkStrictly }"
                 @change="onChange"
                 clearable></el-cascader>
</template>
<script>
export default {
    name: "SelectCategory",
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Array],
            default: () => ''
        },
        url: {
            type: String,
            default: () => ''
        },
        queryParams: {
            type: Object,
            default: () => {
            }
        },
        checkStrictly: {
            type: Boolean,
            default: ()=> false
        },
        disabled: {
            type: Boolean,
            default: ()=> false
        }
    },
    data() {
        return {
            options: [],
            inputValue: []
        }
    },
    watch: {
        url: {
            immediate: true,
            handler() {
                this.getOptions()
            }
        },
        value() {
            this.inputValue = this.value && typeof this.value === 'string' ? this.value.split(',') : this.value
            this.inputValue = this.inputValue.filter(el=>{
                return !!el
            })
        }
    },
    methods: {
        getOptions() {
            this.request.get(this.url, {params: this.queryParams}).then(response => {
                this.options = response.data || []
            }).finally(() => {
            })
        },
        onChange() {
            let val = this.inputValue
            let CheckedNodes = this.getCheckedNodes()
            let pathLabels = CheckedNodes.map(el=>{
                return el.pathLabels
            })
            this.$emit('change', val, pathLabels[0])
            this.$emit('input', val, pathLabels[0])
            this.$emit('update:model', val, pathLabels[0])
        },
        getCheckedNodes() {
            return this.$refs.cascader.getCheckedNodes()
        },
        clear() {
            this.inputValue = []
        }
    }
}
</script>

<style scoped>

</style>
